<template>
<div style="width:100%;height: 1210px;">
  <div style="width:95%;margin:0 auto;" class="box-content">
      <!-- 头部 -->
    <div class="box-top" style="display:flex">
      <div  style="width:40%" class='box-top-left'>
        <div class="daohang">
      <i style="font-size:20px;color:#999;line-height:60px;float: left;"  class="el-icon-s-home"></i>  
      <el-breadcrumb separator="/">
      <el-breadcrumb-item style="font-size:15px;color:#999; line-height:60px; margin-left:8px;display:block;float: left;" :to="{ path: '/index' }">首页 </el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px;margin-left:-3px;float: left" class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">优惠管理</el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px; margin-left:5px;float: left"   class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">优惠劵管理</el-breadcrumb-item>
      <i style="font-size:15px;line-height:63px; margin-left:5px;float: left"   class="el-icon-folder-opened"></i>  
      <el-breadcrumb-item style="font-size:15px;line-height:64px; margin-left:8px;display:block;float: left;">添加优惠卷</el-breadcrumb-item>
    </el-breadcrumb>
      </div>
    </div>
  </div>
  <!-- 内容 -->
  <div class="middle">
    <i @click="back()" style="font-size:25px;font-weight:700;margin-left:20px" class="el-icon-arrow-left"></i>
    <div class="middle-box">
        <span style="display:block;margin-top:40px;margin-left:120px;font-weight:700;"><span style="color:red">*</span>排序:<input style="width:190px;height:25px;margin-left:15px" type="text" /></span>
        <span style="display:block;margin-top:7px;margin-left:170px;color:red">*数字越小越靠前</span>
        <span style="display:block;margin-top:25px;margin-left:90px;font-weight:700;">优惠劵名称:<input  v-model="name" style="width:190px;height:25px;margin-left:15px" type="text" /></span>
        <span style="display:block;margin-top:25px;margin-left:125px;font-weight:700;">分类:  <el-select size="mini" style="width:190px;margin-left:15px" v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option></el-select>
  </span>
  <span style="display:block;margin-top:40px;margin-left:100px;font-weight:700;">使用条件:<input v-model="man" style="width:190px;height:25px;margin-left:15px" type="text" /></span>
  <span style="display:block;margin-top:7px;margin-left:170px;color:red">*消费满多少可用,空或0不限制</span>
  <span style="display:block;margin-top:25px;margin-left:80px;font-weight:700;">使用时间限制:
    <button style="width:80px;height:31px;margin-left:8px;background:white;border:1px solid #C3C3C3">
    <span >获得后</span></button>
    <input style="width:190px;height:29px;border:1px solid #C3C3C3" type="text" />
    <button style="width:100px;height:31px;background:white;border:1px solid #C3C3C3">(天)内有效</button>

    </span>

    <span style="display:block;margin-top:15px;margin-left:157px;font-weight:700;display:flex">
    <button style="width:80px;height:31px;margin-left:8px;background:white;border:1px solid #C3C3C3">
    <span >获得后</span></button>
    <div class="block1 " @click="Man()">
    <el-date-picker
    size="small"
    @blur="Man1()"
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
    <button style="width:100px;height:31px;background:white;border:1px solid #C3C3C3">内有效</button>
    </span>
 
 <div v-if="Talk" style="100%;height:340px;"></div>
 <span style="display:block;margin-top:35px;margin-left:95px;font-weight:700;">优惠方式:
  <button style="width:80px;height:31px;margin-left:13px;background:white;border:1px solid #C3C3C3">
    <span >立减</span></button>
    <input v-model="jia" style="width:190px;height:29px;border:1px solid #C3C3C3" type="text" />
    <button style="width:40px;height:31px;background:white;border:1px solid #C3C3C3">元</button>
  </span>
  <span style="display:block;margin-top:40px;margin-left:95px;font-weight:700;">发放张数:<input v-model="quantity" placeholder="优惠劵总数量,数量为-1则为不限制张数" style="width:270px;height:25px;margin-left:15px" type="text" /></span>


  <el-form   :model="ruleForm"  ref="ruleForm" label-width="150px" class="demo-ruleForm">
    <el-form-item style="margin-left:10px;margin-top:40px" label="是否限制会员等级:" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="是"></el-radio>
      <el-radio label="否"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="">

    <el-form-item label="活动性质">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="lv1" name="type"></el-checkbox>
      <el-checkbox label="lv2" name="type"></el-checkbox>
      <el-checkbox label="lv3" name="type"></el-checkbox>
      <el-checkbox label="lv4" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  </el-form-item>
    <el-form-item style="margin-left:10px;margin-top:30px" label="是否注册时间:" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
      <el-radio label="是·"></el-radio>
      <el-radio label="否·"></el-radio>
    </el-radio-group>
<div style="width:500px;height:140px;border:1px solid #C3C3C3;margin-left:-15px">
  <el-checkbox-group  v-model="ruleForm.type">
    <el-checkbox style="display:block;margin-left:15px;margin-top:10px;z-index:1"  name="type">注册时间在
      <el-select size="mini" style="width:90px;margin-left:15px" v-model="value" placeholder="请选择">
  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" > </el-option></el-select>
  <button style="width:60px;height:31px;background:white;border:1px solid #C3C3C3;margin-left:10px">(天)内</button>
  <span style="margin-left:10px;font-weight:700;">的用户可以领取</span>
    </el-checkbox>
    <el-checkbox   label="1" style="display:block;margin-left:15px;margin-top:10px;z-index:1"  name="type">注册时间在
      <el-select size="mini" style="width:90px;margin-left:15px" v-model="value" placeholder="请选择">
  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" > </el-option></el-select>
  <button style="width:60px;height:31px;background:white;border:1px solid #C3C3C3;margin-left:10px">(天)上</button>
  <span style="margin-left:10px;font-weight:700;">的用户可以领取</span>
    </el-checkbox>      <el-checkbox style="display:block;z-index:1;margin-left:15px" label="注册时间在24小时内的用户可以领取" name="type"></el-checkbox>
       
    </el-checkbox-group>

</div>

  </el-form-item>
  <el-form-item style="margin-left:10px;margin-top:45px" label="商品使用限制" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="不添加限制"></el-radio>
      <el-radio label="允许以下商品使用"></el-radio>
    </el-radio-group>
  </el-form-item>
  <div style="width:900px;display:flex;margin-left:95px">
    <span style="margin-top:6px">选择商品</span>
    <input style="width:700px;height:25px;margin-left:20px;background:#DDDDDD;border:none"  type="text"/>
    <button @click="choice()" style="width:80px;height:26px;border:none;background:#44ABF7">选择商品</button></div>
    <div style="width:100%;height:100px;">
      <button @click.prevent="add()" style="margin-top:60px;margin-left:80px; width:80px;height:30px;background:white;border:1px solid #999">确认</button>
      <button style="margin-left:40px; width:80px;height:30px;background:white;border:1px solid #999">取消</button>

    </div>

  </el-form>

    </div>

    <div  v-if="isShow1" class='popContainer' >
                   <div class="popContainer-box1" style="  position: relative;  ">
                    <div style="width:100%;height:40px;background:#BBBBBB;display:flex;    justify-content: space-between;" class="popContainer-box-top">
                      <span  style="font-size:14px;display:block;margin-left:20px;margin-top:10px;">选择商品</span>
                      <span @click="cancel()" style="font-size:20px;display:block;margin-right:20px;margin-top:8px">❌</span>
                    </div>
                    <div style="display:flex;justify-content: space-around;margin-top:25px">  
                  <div>
        <el-select     @change="change" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options2"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
                  </div>
                 <div> <input placeholder="请输入关键字" style="width:400px;height:36px;"  v-model="value1" /><button @click="search1()" style="width:80px;height:40px">搜索</button></div>
                   </div>
                   <div style="width:94%;height:400px;background:red;margin:50px auto">
                    
    <el-table
    v-if="xian1"
    :data=" drugList1"
    height="400"
    border
    style="width: 100%">
    <el-table-column
      label="商品"
      width="641"
    >
      <img src=" http://127.0.0.1:7001/public/whjpng/yaopin.png"/>

    </el-table-column>
    <el-table-column  
      prop="price"
      label="商品价格"
      width="80">
    </el-table-column>
    <el-table-column
      prop="stock"
      width="80"
      label="库存">
    </el-table-column>
    <el-table-column
      width="80"
      label="操作">
      <template v-slot="{row}">
        <button @click="xua(row)" :class="[row.operation==0?'checkColor1':'checkColor']"  >{{row.operation==0?'选择':'取消'}}</button>
      </template>
      

    </el-table-column>
  </el-table>
  <el-table
  v-if="xian"
    :data=" drugList2"
    height="400"
    border
    style="width: 100%">
    <el-table-column
      label="商品"
      width="641"
    >
      <img src=" http://127.0.0.1:7001/public/whjpng/yaopin.png"/>
    </el-table-column>
    <el-table-column  
      prop="price"
      label="商品价格"
      width="80">
    </el-table-column>
    <el-table-column
      prop="stock"
      width="80"
      label="库存">
    </el-table-column>
    <el-table-column
      width="80"
      label="操作">
    </el-table-column>
  </el-table>            
  <el-pagination
  style="margin-left:691px"
  background
  layout="prev, pager, next"
  :page-size="5"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :total="drugList.length">
</el-pagination>
                    </div> 

                   </div>
        </div>

  </div>
</div>

</div>

</template>

<script>
    import {getDrug,addDis,upDrug}from '../../api/index'
export default {
data(){
  return{
    isShow1:false,
    options: [{
          value: '选项1',
          label: '满减卷'
        }, {
          value: '选项2',
          label: '商品卷'
        }, {
          value: '选项3',
          label: '新人卷'
        },],
        options1: [{
          value: '选项1',
          label: '1'
        }, {
          value: '选项2',
          label: '2'
        }, {
          value: '选项3',
          label: '3'
        },],
        value: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: '',
        Talk:false,
        value3:'',
       ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '1',
          desc: ''
        },
        // 时间
        time:'',
        time1:'',
        // 优惠卷
        name:"",//名称
        man:'',//满多少 
        quantity:'',//数量
        jia:"",//减,
        xian:false,
        xian1:true,
        options2: [{
          value: '1',
          label: '感冒药'
        }, {
          value: '2',
          label: '发烧药'
        }, {
          value: '3',
          label: '头疼药'
        }],
        drugList:[],
        drugList1:[],
        drugList2:[],
        pageNum:5,//每页5条
        size:1,
  }
},
created(){
    this.getDrugList()
  },
methods:{
  getDrugList(){
      getDrug().then(res=>{
this.drugList=res.data
this.drugList1=this.drugList.slice(0,5)
 })},
  back(){
    this.$router.back(-1)
  },
  Man(){
    this.Talk=true
  },
  Man1(){
    // 时间转换
   this.Talk=false
   let a= this.value1[0]
   let b=this.value1[1] 
  var chinaStandard=a
      var date = new Date(chinaStandard);
      var y = date.getFullYear();
	  var m = date.getMonth() + 1;
	  m = m < 10 ? ('0' + m) : m;
	  var d = date.getDate();
 	  d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
	  var minute = date.getMinutes();
	  minute = minute < 10 ? ('0' + minute) : minute;
	  this.time = y + '-' + m + '-' + d+' '+h+':'+minute;  
    console.log(this.time)
    var chinaStandard=b
      var date = new Date(chinaStandard);
      var y = date.getFullYear();
	  var m = date.getMonth() + 1;
	  m = m < 10 ? ('0' + m) : m;
	  var d = date.getDate();
 	  d = d < 10 ? ('0' + d) : d;
      var h = date.getHours();
	  var minute = date.getMinutes();
	  minute = minute < 10 ? ('0' + minute) : minute;
	  this.time1 = y + '-' + m + '-' + d+' '+h+':'+minute;  
    console.log(this.time1)
  },
  add(){
    // console.log(this.name,this.man,this.jia,this.quantity
    if(this.time&&this.time1&&this.quantity&&this.name!==''){
      let a={
      discont:this.time,
      outtime:this.time1,
      quantity:this.quantity,
      condition:this.name,
      project:'满'+this.man+'-'+this.jia,
      surplus:100
    }
    addDis(a).then(res=>{
      this.back()
    })
    }
   
  },

  choice(){
      this.isShow1=true
      console.log(111)
    },
    change(){
      if(this.value==1){
        console.log(111)
        this.drugList1=this.drugList.slice(0,5)
      }if(this.value==2){
        this.drugList1=this.drugList.slice(5,10)
      }
      if(this.value==3){
        this.drugList1=this.drugList.slice(10,15)
      }},
      handleSizeChange(val){
console.log(val)
    },
    handleCurrentChange(val){
this.size=val
 this.drugList1=this.drugList.slice(val * this.pageNum-this.pageNum,val*this.pageNum)
    },
    search1(){
      console.log(this.value1)
      this.drugList1.forEach(item=>{
        console.log(item)
        if(this.value1==item.stock){
           this.drugList2.push(item)
            this.xian=true
            this.xian1=false
            if(this.drugList2.length>1){
            this.drugList2.shift()
          }
       }
      })
     
    },
    xua(row){
      console.log(row.operation)
  if(row.operation==='0'){
  upDrug({id:row.id,operation:'1'}).then(res=>{
 
    this.getDrugList()
    console.log(res)
  })
}else{
  upDrug({id:row.id,operation:'0'}).then(res=>{

    this.getDrugList() // 重新获取一下
    console.log(res)
  })}
 },
 cancel(){
      this.isShow=false
      this.isShow1=false

    },
},
computed: {
    multiFiled() {
      const {full,reduce} = this
        return {full,reduce}
    },
   
  },
  watch:{
    multiFiled(){
      if(this.full!==''&&this.reduce!==''){
       this.isFalse=false
      } 
    },
    value1(){
      if(this.value1==''){
        this.xian1=true
          this.xian=false
      }
    }
  }

}
</script>

<style lang="scss">
.box-top{
  width: 100%;
// background:blue;
// 导航
.daohang{
  width: 100%;
  height: 50px;
}

}
.middle{
  width: 100%;
  height: 500px;
  .middle-box{
    width: 100%;
    height: 400px;
    margin-top:20px
  }
}



.popContainer{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.6);
      z-index: 2;
      .popContainer-box{
        width: 50%;
        background: white;
        height: 600px;
        margin-left: 15%;
        margin-top:13%;
      }
      .popContainer-box1{
        width: 50%;
        background:white;
        height: 600px;
        margin-left: 17%;
        margin-top:9%;
        z-index: 10;

      }
 
  }
  .reg{
    width: 500px;
    height: 40px; 
    margin: 20px 55px;  
    display: flex;
justify-content: space-between;
align-items: center

    }
    .checkColor{
      width:55px;
      color:white;
      height:25px;
      background:red;
      border:none;
      border-radius:5px;
    }
    .checkColor1{
      width:55px;
      color:white;
      height:25px;
      background:#46B2F7;
      border:none;
      border-radius:5px;
    }
    .Recharge{
      width: 40%;
      height: 400px;
      margin-top: 15px;
      border-top: 5px solid #F6F8F9 ;
    }
</style>